<!--
    fileList        为页面传入的图片列表数据
    uploadText	    上传按钮文案显示 默认为'点击上传'
    uploadSuccess   图片上传成功后需要传父组件图片列表的数据
    fileLimit       图片上传最大数量 默认为1张
    imgSize         限制图片上传的大小 默认150kb
    multiple        true 为批量上传，默认是一张一张单独传
    hidden	        true 为上传功能和图片文字提示都隐藏
    <Upload
        :fileList="fileList"
        @uploadSuccess="uploadSuccess"
        :imgSize="100"
    ></Upload>
-->
<template>
  <div class="upload-image">
    <a-upload
      ref="upload"
      action="#"
      :listType="listType"
      :beforeUpload="beforeUpload"
      :preview="handlePreview"
      :remove="handleRemove"
      :fileList="fileList"
      :imgSize="imgSize"
      :multiple="multiple"
    >
      <div v-if="!hidden">
        <a-button v-if="listType !== 'picture-card'">
          <a-icon :type="uploadIcon"/>{{ uploadText }}
        </a-button>
        <div v-else>
          <a-icon type="plus" />
          <div class="ant-upload-text">{{ uploadText }}</div>
        </div>
      </div>
    </a-upload>
    <div class="upload-tip" v-if="!hidden" style="margin-top: 10px;"><span><a-icon type="warning" style="color: red; margin-right: 5px;" />支持上传jpg/jpeg/png文件，且不超过{{ imgsize }}kb</span></div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
export default {
  name: 'UploadImage',
  data () {
    return {
      limit: this.fileLimit,
      imgsize: this.imgSize,
      fileUrlCal: this.fileUrl	// fileUrlCal 存放父组件传过来的url
    }
  },
  props: {
    hidden: {
      type: Boolean,
      default: false
    },
    uploadIcon: {
      type: String,
      default: 'upload'
    },
    fileUrl: {
      type: String
    },
    uploadText: {
      type: String,
      default: '点击上传'
    },
    uploadSuccess: {
      type: Function
    },
    fileLimit: {
      type: Number,
      default: 1
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    imgSize: {
      type: Number,
      default: 150
    },
    multiple: {
      type: Boolean,
      default: false
    }

  },
  created () {
    this.fileUrlCal = this.fileUrl
  },
  methods: {
    beforeUpload (file) {
      console.log(file, '==file==')
      const fileReader = new FileReader()
      const isLt5M = file.size < this.imgsize * 1024
      if (!isLt5M) {
        this.$message.warning(
          `图片大小超过${this.imgsize}kb`
        )
        return false
      }
      if (file) {
        fileReader.readAsDataURL(file)
      }
      fileReader.onload = () => {
        const base64Str = fileReader.result
        let fileType = ''
        if (file.type === 'image/jpeg') {
          fileType = 'jpg'
        } else {
          fileType = file.type.replace(/image\//, '')
        }
        const params = {
          data: base64Str.split(',')[1],
          name: file.name,
          type: fileType
        }
        if (this.fileList.length >= this.fileLimit) {
          return this.$message.warning(
            '图片上传达上限，请删除后再上传！'
          )
        }
        this.uploadImage(params)
      }
    },
    uploadImage (params) {
      this.$http.post('/college/web-api/file/uploadFile', params).then(res => res.data)
        .then(res => {
          if (res.code === 0) {
            // const baseUrl = window.location.protocol+"//"+window.location.host + path
            const url = res.url
            this.fileList.push({ uid: '-1', url: url })
            this.$emit('uploadSuccess', res.url)
          }
        })
    },
    // 图片删除
    handleRemove (file, file1) {
      if (this.hidden) {
        return false
      }
      const idx = this.fileList.indexOf(file)
      this.fileList.splice(idx, 1)
      let url
      url = this.fileList.length > 0 ? this.fileList[0].url : ''
      this.$emit('uploadSuccess', url)
    }
  },
  computed: {
    fileList () {
      if (this.fileUrl) {
        return [{
          uid: 1,
          url: this.fileUrlCal
        }]
      } else {
        return []
      }
    }
  },
  watch: {
    fileUrl (val) {
      const reg = /^http(s)?:\/\/(.*?)\//
      const baseUrl = 'http://test.minarole.com'
      let url = ''
      // const baseUrl = window.location.protocol+"//"+window.location.host + path
      if (reg.test(val)) {
        val.replace(reg, '/')
        url = val
      } else {
        url = baseUrl + val
      }
      this.fileUrlCal = url
    }
  }
}
</script>
<style lang="scss">
</style>
